<template>
  <card>
    <div v-show="step.order">
      <div class="model-title">{{ step.name }}</div>
      <!-- 问答模型 -->
      <div class="qa-model model">
        <small-card title="问答模型" var-name="第一步·AI回答结果">
          <el-select
            ref="model-selector"
            v-model="qaModel"
            class="selector"
            clearable
            placeholder="请选择"
            @change="changeSelection($event, 'modelOptions', 'model-selector')"
            @clear="clearSelection('model-selector')"
          >
            <el-option v-for="option in modelOptions" :key="option.value" :label="option.name" :value="option.value">
              <div class="option">
                <img alt="" class="option-prefix" :src="option.img" />
                <span class="option-name">{{ option.name }}</span>
                <span class="option-suffix">{{ option.suffix }}</span>
              </div>
            </el-option>
          </el-select>
        </small-card>
      </div>

      <el-divider />

      <!-- 外接插件 -->
      <div class="kb-model model">
        <small-card title="外接插件" var-name="第一步·本地知识库结果">
          <el-select
            ref="kb-selector"
            v-model="kb"
            class="selector"
            clearable
            placeholder="请选择"
            @change="changeSelection($event, 'kbOptions', 'kb-selector')"
            @clear="clearSelection('kb-selector')"
          >
            <el-option v-for="option in kbOptions" :key="option.value" :label="option.name" :value="option.value">
              <div class="option">
                <img alt="" class="option-prefix" :src="option.img" />
                <span class="option-name">{{ option.name }}</span>
              </div>
            </el-option>
          </el-select>
          <div class="select-kb">
            <div class="left">选择知识库</div>
            <div class="right" style="cursor: pointer"><i class="el-icon-plus"></i></div>
          </div>

          <div class="plus">
            <el-button @click="handlePlusKb">点击“+”按钮添加知识库</el-button>
          </div>
        </small-card>
      </div>

      <el-divider />

      <!-- 等待用户输入 -->
      <div class="pause-model model">
        <small-card var-name="第五步·用户输入信息">
          <el-checkbox v-model="pause">暂停并等待用户输入</el-checkbox>
        </small-card>
      </div>

      <el-divider />

      <!-- 公告提示 -->
      <!--
      <div class="tips-model model">
        <el-checkbox v-model="reply">公告提示（原样输出左侧文字，常用于提示用户下一步操作）</el-checkbox>
      </div>

      <el-divider />
      -->

      <!-- 捕获回答，写入word -->
      <div class="word-model model">
        <el-checkbox v-model="word">捕获回答，写入word中</el-checkbox>
      </div>

      <el-divider />

      <!-- 结束流程 -->
      <div class="end-model model">
        <el-checkbox v-model="isEnd">结束流程，提供Word下载</el-checkbox>
      </div>
    </div>
    <el-empty v-show="!step.order" description="请选择左侧步骤进行配置" />
    <!--    <div v-show="!step" class="empty">请选择左侧步骤进行配置</div>-->
    <kb-dialog ref="kbDialog" @confirm-kb="confirmSelect" />
  </card>
</template>

<script>
  import Card from '@/views/adminClient/components/Card.vue'
  import SmallCard from './SmallCard.vue'
  import KbDialog from '@/components/KbDialog.vue'
  import { modelOptions, kbOptions } from '../data'

  export default {
    name: 'ModelCard2',
    components: { SmallCard, Card, KbDialog },
    model: {
      prop: 'function',
      event: 'change',
    },
    props: {
      step: {
        type: Object,
        default() {
          return {
            id: '',
            name: '',
            order: null,
            dependent: '',
            content: '',
            type: '',
            function: {
              code: '',
              name: '',
              params: '',
              variable: '',
              doc_tags: true,
            },
          }
        },
      },
    },
    data() {
      return {
        modelOptions,
        qaModel: '',
        kb: '',
        kbOptions,
        visible: false,
        kbKeyword: '',
        pause: false,
        reply: false,
        word: false,
        isEnd: false,
      }
    },
    methods: {
      reset() {
        // 更换步骤前先重置所有选项
      },
      confirmSelect(kb) {
        console.log(kb)
      },
      changeSelection(value, optionsName, refName) {
        if (!value) {
          return
        }
        const options = this[optionsName]
        const i = options.findIndex((item) => item.value === value)
        this.$refs[refName].$el.children[0].children[0].setAttribute(
          'style',
          `
				background: url(${options[i].img}) no-repeat;
				background-position: 10px center;
				background-size: 20px 20px;
				text-indent: 30px;
				`
        )
      },
      clearSelection(refName) {
        this.$refs[refName].$el.children[0].children[0].removeAttribute('style')
      },
      handlePlusKb() {
        this.$refs.kbDialog.showDialog()
      },
    },
  }
</script>

<style scoped lang="scss">
  .model-title {
    text-align: center;
    font-size: 13px;
  }

  .model {
    border-radius: 8px;
    padding: 8px 8px 10px;

    &.disabled {
      pointer-events: none;
      cursor: not-allowed;
      background: #f5f5f5;
      color: #999999;
      ::v-deep .small-card {
        .title {
          color: #999999;
        }
      }
    }
  }

  ::v-deep .selector {
    width: 100%;
    .el-input__inner {
      border-radius: 8px;
    }
  }

  .option {
    display: flex;
    align-items: center;

    .option-prefix {
      width: 20px;
      height: 20px;
      vertical-align: baseline;
    }

    .option-name {
      margin: 0 5px;
    }

    .option-suffix {
      height: 16px;
      line-height: 16px;
      display: inline-block;
      padding: 0 3px;
      background: #f5f5f5;
      border-radius: 4px;
      border: 1px solid #999999;
      color: #999999;
      font-weight: 400;
    }
  }

  ::v-deep .el-divider {
    margin: 10px 0;
  }

  .kb-model {
    .select-kb {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15px 0 5px;
    }

    .plus {
      .el-button {
        width: 100%;
        height: 40px;
        background: #f5f5f5;
        border: none;
      }
    }
  }
</style>
